<template>
  <div class="process-instance-view">
    <div class="process-instance-view-header">
      <span v-if="bpmPiName">过程名称：{{ bpmPiName }}</span>
      <!-- <ProcessUserConfigButton :process-instance-id="instanceId" /> -->
      <a-space style="float: right" class="process-instance-tips">
        <a-badge color="#b00015" text="正在进行" />
        <a-badge color="#0abf96" text="已完成" />
        <!-- <a-badge color="#ed9223" text="待执行" />
        <a-badge color="#8c96a2" text="不执行" /> -->
        <a-badge color="#fff" text="未执行" />
        <a-button v-if="resizable" type="link" style="padding: 4px" @click="handleShowModal">最大化</a-button>
        <a-button v-if="resizable" type="link" style="padding: 4px" @click="handleCollapse">{{ collapsed ? '展开' : '收起' }}</a-button>
      </a-space>
    </div>
    <AvicBpmChart
      v-if="showChart"
      v-show="bpmPiName"
      :bpm-instance-object="bpmInstanceObject"
      v-bind="$attrs"
      @loaded="handleLoaded"
      @node-click="handleNodeClick"
    />
    <a-empty v-show="!bpmPiName" description="暂无过程数据" />
    <ProcessInstanceGraphModal
      v-if="showProcessGraphModal"
      :bpm-instance-object="bpmInstanceObject"
      v-bind="$attrs"
      @close="showProcessGraphModal = false"
    />
  </div>
</template>
<script setup lang="ts">
import AvicBpmChart from '@/views/avic/bpmpi/bpmpidesigner/components/x6/bpmpi-perview/index.vue';
import ProcessInstanceGraphModal from './ProcessInstanceGraphModal.vue';
// 引入文字跟踪组件
import BpmInstanceObject from '@/views/avic/bpm/bpmutils/FlowEditor'; // 引入过程变量

const $emit = defineEmits(['close', 'toggle-collapse', 'node-click', 'node-dblclick']);
const props = defineProps({
  /**
   * 流程实例对象
   */
  bpmInstanceObject: {
    type: Object,
    default: null
  },
  /**
   * 直接传入过程实例Id
   */
  processInstanceId: {
    type: String,
    default: null
  },
  resizable: {
    type: Boolean,
    default: false
  }
});
const collapsed = ref(false);
function handleCollapse() {
  collapsed.value = !collapsed.value;
  $emit('toggle-collapse', collapsed.value);
}
const showProcessGraphModal = ref(false);
function handleShowModal() {
  showProcessGraphModal.value = true;
}
// eslint-disable-next-line vue/no-dupe-keys
const bpmInstanceObject = ref(new BpmInstanceObject());
onMounted(() => {
  bpmInstanceObject.value.bpmModel.entryId = props.processInstanceId;
});

const showChart = ref(true);
watch(
  () => props.processInstanceId,
  (val) => {
    bpmInstanceObject.value.bpmModel.entryId = val;
  }
);
const bpmPiName = ref('');
function handleLoaded(data) {
  bpmPiName.value = data?.graph?.data?.name || '';
}
function handleNodeClick(params) {
  $emit('node-click', params);
}
</script>
<style lang="less" scoped>
.process-instance-view {
  display: block;
  width: 100%;
  height: 100%;
  .process-instance-view-header {
    height: 40px;
    background-color: #cee2f7;
    border-radius: 4px 4px 0 0;
    font-weight: 400;
    line-height: 40px;
    padding: 0 12px;
    .process-instance-tips {
      height: 40px;
      :deep(.ant-badge-status-dot) {
        width: 14px;
        height: 14px;
        border-radius: 1px;
      }
      :deep(.ant-badge-status-text) {
        display: inline;
      }
    }
  }
  .process-instance-view-graph {
    height: calc(100% - 40px);
  }
}
</style>
